<template>
  <div class="app-container home">
    <!-- 顶部标题和时间区域 -->
    <div class="top-header">
      <h1 class="main-title">数字医疗挂号平台</h1>
      <div class="current-time">{{ currentTime }}</div>
    </div>

    <!-- 功能卡片组件 -->
    <FunctionCards />

    <!-- 中间内容区：科室信息和挂号人员叫号屏 -->
    <el-row :gutter="20" class="mb-6">
      <!-- 左侧：科室信息 -->
      <el-col :sm="24" :lg="16" class="col-item">
        <DepartmentInfo ref="departmentInfoRef" />
      </el-col>

      <!-- 右侧：挂号人员叫号屏 -->
      <el-col :sm="24" :lg="8" class="col-item">
        <CallingScreen ref="callingScreenRef" />
      </el-col>
    </el-row>

    <!-- 底部：预约剩余 -->
    <el-row :gutter="20">
      <el-col :span="24" class="col-item">
        <ReservationStats ref="reservationStatsRef" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted, onUnmounted } from 'vue'
import FunctionCards from './components/FunctionCards.vue'
import DepartmentInfo from './components/DepartmentInfo.vue'
import CallingScreen from './components/CallingScreen.vue'
import ReservationStats from './components/ReservationStats.vue'

const currentTime = ref('')
const departmentInfoRef = ref(null)
const callingScreenRef = ref(null)
const reservationStatsRef = ref(null)
let timeInterval = null

// 更新当前时间
function updateCurrentTime() {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '-')
}

// 组件挂载时初始化
onMounted(() => {
  updateCurrentTime()
  timeInterval = setInterval(updateCurrentTime, 1000)
})

// 组件卸载时清理
onUnmounted(() => {
  if (timeInterval) clearInterval(timeInterval)
})
</script>

<style scoped lang="scss">
/* 样式保持不变，可根据需求微调 */
.home {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;

  .top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e6eb;

    .main-title {
      font-size: 28px;
      font-weight: bold;
      color: #1f2d3d;
      margin: 0;
    }

    .current-time {
      font-size: 18px;
      color: #333;
      font-weight: 500;
      padding: 8px 15px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  }

  .col-item {
    margin-bottom: 20px;
  }

  h2 {
    font-weight: bold;
    color: #000;
  }
}
</style>